import { RouteObject, useNavigate } from 'react-router-dom'
import { FC, lazy, ReactNode, Suspense } from 'react'
import {
  BulbOutlined,
  DatabaseOutlined,
  FileOutlined,
  PartitionOutlined,
  RadarChartOutlined,
  SisternodeOutlined,
  TableOutlined,
  ToolOutlined,
} from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { Menu as AntdMenu } from 'antd'

import Home from '@/pages/home/Home'
import Login from '@/pages/login/Login'
import SustainKG from '@/pages/sustainKG/SustainKG'
const Graph = lazy(() => import('@/pages/graph/Graph'))
const UITest = lazy(() => import('@/pages/uitest/UITest'))
const Projects = lazy(() => import('@/pages/projects/Projects'))
const Assets = lazy(() => import('@/pages/assets/Assets'))
const Templates = lazy(() => import('@/pages/templates/Templates'))
const Methods = lazy(() => import('@/pages/methods/Methods'))

const lazyLoad = (children: ReactNode): ReactNode => {
  return <Suspense fallback={<div>loading</div>}>{children}</Suspense>
}

export const router: RouteObject[] = [
  {
    path: '/',
    element: <Home />,
    children: [
      { path: '/sustainKG', element: <SustainKG /> },
      { path: '/graph/:projectID', element: lazyLoad(<Graph />) },
      { path: '/uitest', element: lazyLoad(<UITest />) },
      { path: '/projects', element: lazyLoad(<Projects />) },
      { path: '/assets', element: lazyLoad(<Assets />) },
      { path: '/templates', element: lazyLoad(<Templates />) },
      { path: '/methods', element: lazyLoad(<Methods />) },
    ],
  },
  {
    path: '/login',
    element: <Login />,
  },
]

type MenuItem = Required<MenuProps>['items'][number]
interface IMenu {
  data1?: any
}
export const Menu: FC<IMenu> = () => {
  const navigation = useNavigate()

  const getItem = (
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group'
  ): MenuItem => {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem
  }

  const items: MenuProps['items'] = [
    getItem('项目', '/zmx', <FileOutlined rev={null} />, [
      getItem('最近', '/projects', null),
      getItem('团队（暂未开放）', '/group', null),
    ]),
    getItem('设计资产', '/assets', <DatabaseOutlined rev={null} />),
    getItem('设计模板', '/templates', <TableOutlined rev={null} />),
    getItem('创新方法', '/methods', <ToolOutlined rev={null} />),

    { type: 'divider' },
    getItem('智能交互评价', '/智能交互评价', <RadarChartOutlined rev={null} />),
    getItem('创意灵感激发', '/创意灵感激发', <BulbOutlined rev={null} />),
    getItem('多通道交互', '/多通道交互', <SisternodeOutlined rev={null} />),
    getItem('因果逻辑探索', '/因果逻辑探索', <PartitionOutlined rev={null} />),
  ]

  const handleItemClick = (path: string) => {
    navigation(path)
  }

  return (
    <AntdMenu
      onClick={(itemInfo) => handleItemClick(itemInfo.key)}
      style={{ border: 'none' }}
      defaultSelectedKeys={['/projects']}
      defaultOpenKeys={['/zmx']}
      mode="inline"
      inlineIndent={16}
      items={items}
    />
  )
}
